<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <title>新闻管理</title>
    <th:block th:replace="/backstage/common_resources::common_css"></th:block>
    <th:block th:replace="/backstage/common_resources::common_js"></th:block>

</head>

<body class="hold-transition skin-purple sidebar-mini">
<header th:replace="/backstage/common_header::header"></header>
<aside th:replace="/backstage/common_aside::aside"></aside>
    <div class="wrapper">

        <div class="content-wrapper">

            <!-- 内容头部 -->
            <section class="content-header">
                <h1>
                    新闻管理
                    <small>添加新闻</small>
                </h1>
                <ol class="breadcrumb">
                    <li><a href="@{/backstage/index}"><i class="fa fa-dashboard"></i> 首页</a></li>
                    <li><a href="@{/backstage/news/all}">新闻管理</a></li>
                    <li class="active">添加新闻</li>
                </ol>
            </section>
            <!-- 内容头部 /-->

            <!-- 正文区域 -->
            <section class="content">
                  <!--基础控件-->
                      <div class="row data-type">

                          <div class="col-md-2 title" style="height: 110px">产品图片</div>
                          <div class="col-md-8 data" style="height: 110px">
                              <form id="uploadPImage" enctype="multipart/form-data">
                                  <input type="file"  name="file" id="pImageFile">
                              </form>
                          </div>
<!--                          异步提交的方法-->
                          <script>
                              $(function (){
                                  $("#pImageFile").change(function (){
                                      // 异步提交表单
                                      $("#uploadPImage").ajaxSubmit({
                                          url:"/backstage/news/upload",
                                          type:"post",
                                          success:function (result) {
                                              // 上传成功后图片回显到pimage上
                                              $("#pImage").attr("src",result.data[0]);
                                              //上传成功后，图片地址放入产品表单的隐藏域中
                                              $("#hiddenpImage").val(result.data[0]);
                                          }
                                      })
                                  })
                              })
                          </script>
                          <div class="col-md-2 data" style="height: 110px">
                              <img height="100" th:src="@{/backstage/img/no-img.png}" id="pImage">
                          </div>

                          <form th:action="@{/backstage/news/add}" method="post">
                              <input type="hidden" name="pImage" id="hiddenpImage">
                          <div class="col-md-2 title">新闻标题</div>
                          <div class="col-md-4 data">
                              <input type="text" class="form-control" placeholder="新闻标题" name="newsName">
                          </div>
                          <div class="col-md-2 title">发布机构</div>
                          <div class="col-md-4 data">
                              <input type="text" class="form-control" placeholder="发布机构" name="newsPublisher">
                          </div>

                          <div class="col-md-2 title">发布时间</div>
                          <div class="col-md-4 data">
                              <input type="text" class="form-control" placeholder="发布时间" name="newsData">
                          </div>
                          <div class="col-md-2 title">新闻详情链接</div>
                          <div class="col-md-4 data">
                              <input type="text" class="form-control" placeholder="新闻详情链接"  name="url" value="">
                          </div>


                          <div class="col-md-2 title">状态</div>
                          <div class="col-md-4 data">
                              <select class="form-control" name="status">
                                  <option value="true">开启</option>
                                  <option value="false">关闭</option>

                              </select>
                          </div>
                          <div class="col-md-6 data"></div>
                          <div class="col-md-2 title" style="height:350px ">新闻内容</div>
                          <div class="col-md-10 data" style="height:350px ">
                              <div id="div1"></div>
                              <textarea id="text1" style="width:100%; height:200px;"name="newDesc" hidden></textarea>
                              <script>

                                  const E = window.wangEditor;

                                  const editor = new E('#div1');

                                  const $text1 = $('#text1');

                                  editor.customConfig.onchange = function (html) {

                                      // 第二步，监控变化，同步更新到 textarea

                                      $text1.val(html)

                                  }

                                  // 配置所有菜单

                                  editor.customConfig.menus = [

                                      'head', // 标题

                                      'bold', // 粗体

                                      'fontSize', // 字号

                                      'fontName', // 字体

                                      'italic', // 斜体

                                      'underline', // 下划线

                                      'foreColor', // 文字颜色

                                      'backColor', // 背景颜色

                                      'justify', // 对齐方式

                                      'image', // 插入图片

                                      'undo', // 撤销

                                  ]

                                  // 配置服务器上传地址

                                  editor.customConfig.uploadImgServer = '/backstage/news/upload';

                                  // 配置上传图片的参数名

                                  editor.customConfig.uploadFileName = "file";


                                  editor.create();

                                  // 第一步，初始化 textarea 的值

                                  $text1.val(editor.txt.html());
                              </script>
                          </div>


                          <div class="col-md-2 title"></div>
                          <div class="col-md-10 data text-center">
                              <button type="submit" class="btn bg-maroon">保存</button>
                              <button type="button" class="btn bg-default" onclick="history.back(-1);">返回</button>
                          </div>
                          </form>

                      </div>

                  <!--基础控件/-->



            </section>
            <!-- 正文区域 /-->

        </div>
    </div>
<footer th:replace="/backstage/common_footer::footer"></footer>

</body>

</html>